<template>
  <view :data-theme="theme">
    <!-- #ifdef APP-PLUS -->
    <view
      class="header w-full bg-white text-center"
      :style="'height:' + 160 + 'rpx;'"
    >
      <view class="fs-38">购物车</view>
    </view>
    <!-- #endif -->
    <!-- #ifdef MP -->
    <view class="cart_nav bg-white" :style="'height:' + navH + 'rpx;'">
      <view class="navbarCon acea-row">
        <view class="nav_title col-balck" :style="{ top: homeTop + 'rpx' }"
          >购物车</view
        >
      </view>
    </view>
    <!-- #endif -->
    <view
      class="handleTop"
      v-if="isLogin"
      :style="{
        marginTop: navH + appTop + 'rpx',
      }"
    >
      <orderCard
        :status="1"
        v-for="(item, index) in cartList.valid"
        :items="item"
        :key="index"
        :title="item.merName"
        @subOrder="subOrder"
        @subDel="subDel"
      ></orderCard>
      <emptyPage
        :mTop="'45%'"
        v-if="!isLogin"
        title="账号暂未登录"
        :locate="true"
        :imgSrc="'https://app-cangshu.oss-rg-china-mainland.aliyuncs.com/asssets/img/piteras.png'"
      ></emptyPage>
      <emptyPage
        :mTop="'45%'"
        v-if="cartList.valid.length <= 0 && showStatus && isLogin"
        title="暂无商品"
        :locate="true"
        :imgSrc="'https://app-cangshu.oss-rg-china-mainland.aliyuncs.com/asssets/img/piteras.png'"
      ></emptyPage>
    </view>
    <view
      class="shoppingCart copy-data"
      :style="'top:' + navH + 'rpx;'"
      @touchstart="touchStart"
    >
      <view
        class="mask"
        v-show="popupShow"
        @touchmove.stop.prevent="moveStop"
        @click="popupShow = false"
      ></view>
    </view>
    <custom-tabbar :selected="3" @change="onTabChange" />
    <view v-if="bottomNavigationIsCustom" class="footerBottom"></view>
  </view>
</template>
<script>
import orderCard from "@/components/orderCard";
import emptyPage from "@/components/emptyPage.vue";
import customTabbar from "@/components/custom-tabbar.vue";
import { mapGetters } from "vuex";
export default {
  components: {
    orderCard,
    emptyPage,
    customTabbar,
  },
  data() {
    return {
      // #ifdef H5 || MP-WEIXIN
      appTop: 32,
      // #endif
      navH: "",
    };
  },
  computed: {
    ...mapGetters(["isLogin", "globalData"]),
  },
  onLoad: function (options) {
    let that = this;
    // #ifdef MP
    that.navH = this.globalData.navHeight;
    // #endif
  },
  onReady() {},
  onShow: function () {},
  // 滚动监听
  onPageScroll(e) {
    // 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
    uni.$emit("scroll");
  },
  methods: {
    onTabChange() {},
  },
};
</script>

<style scoped lang="scss">
.cart_nav {
  position: fixed;
  //   @include main_bg_color(theme);
  top: 0rpx;
  left: 0;
  z-index: 99;
  width: 100%;
}

.px-20 {
  padding: 0 20rpx 0;
}

.pl-20 {
  padding-left: 20rpx;
}

.navbarCon {
  position: absolute;
  bottom: 0;
  height: 100rpx;
  width: 100%;
}

// .h5_back {
//   color: #fff;
//   position: fixed;
//   left: 20rpx;
//   font-size: 32rpx;
//   text-align: center;
//   line-height: 58rpx;
// }

// .select_nav {
//   width: 170rpx !important;
//   height: 60rpx !important;
//   border-radius: 33rpx;
//   border: 1px solid rgba(255, 255, 255, 0.5);
//   color: #fff;
//   position: fixed;
//   font-size: 18px;
//   line-height: 58rpx;
//   z-index: 1000;
//   left: 14rpx;
// }

.px-20 {
  padding: 0 20rpx 0;
}

// .nav_line {
//   content: "";
//   display: inline-block;
//   width: 1px;
//   height: 34rpx;
//   background: #fff;
//   position: absolute;
//   left: 0;
//   right: 0;
//   margin: auto;
// }

// .container_detail {
//   /* #ifdef MP */
//   margin-top: 32rpx;
//   /* #endif */
// }

// .tab_nav {
//   width: 100%;
//   height: 48px;
//   padding: 0 30rpx 0;
// }

.nav_title {
  width: 200rpx;
  font-size: 35rpx;
  text-align: center;
  margin: auto;
}

// .right_select {
//   position: fixed;
//   right: 20rpx;
//   color: #fff;
//   text-align: center;
//   line-height: 58rpx;
// }

// .dialog_nav {
//   position: fixed;
//   /* #ifdef MP */
//   left: 14rpx;
//   /* #endif */
//   /* #ifdef H5 || APP-PLUS*/
//   right: 14rpx;
//   /* #endif */
//   width: 240rpx;
//   background: #ffffff;
//   box-shadow: 0px 0px 16rpx rgba(0, 0, 0, 0.08);
//   z-index: 999;
//   border-radius: 14rpx;

//   &::before {
//     content: "";
//     width: 0;
//     height: 0;
//     position: absolute;
//     /* #ifdef MP */
//     left: 0;
//     right: 0;
//     margin: auto;
//     /* #endif */
//     /* #ifdef H5 || APP-PLUS */
//     right: 8px;
//     /* #endif */
//     top: -9px;
//     border-bottom: 10px solid #fff;
//     border-left: 10px solid transparent;
//     /*transparent 表示透明*/
//     border-right: 10px solid transparent;
//   }
// }

// .dialog_nav_item {
//   width: 100%;
//   height: 84rpx;
//   line-height: 84rpx;
//   padding: 0 20rpx 0;
//   box-sizing: border-box;
//   border-bottom: #eee;
//   font-size: 28rpx;
//   color: #333;
//   position: relative;

//   .iconfont {
//     font-size: 32rpx;
//   }

//   &::after {
//     content: "";
//     position: absolute;
//     width: 86px;
//     height: 1px;
//     background-color: #eeeeee;
//     bottom: 0;
//     right: 0;
//   }
// }

.pl-20 {
  padding-left: 20rpx;
}

.px-20 {
  padding: 0 20rpx 0;
}

.shoppingCart {
  /* #ifdef H5 */
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  /* #endif */
  position: absolute;
  width: 100%;
  margin-bottom: 280rpx;
}

.shoppingCart .labelNav {
  height: 62rpx;
  padding: 0 24rpx;
  font-size: 28rpx;
  color: #fff;
  width: 100%;
  box-sizing: border-box;
  @include main_bg_color(theme);
  z-index: 5;
  position: fixed;
}

.shoppingCart .labelNav .item .iconfont {
  font-size: 26rpx;
  margin-right: 10rpx;
}

.shoppingCart .nav {
  height: 92rpx;
  background-color: #fff;
  padding: 0 20rpx;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 28rpx;
  color: #282828;
  z-index: 6;
  border-top-left-radius: 14rpx;
  border-top-right-radius: 14rpx;
}

.shoppingCart .nav .num {
  margin-left: 12rpx;
}

.shoppingCart .nav .administrate {
  font-size: 28rpx;
  color: #333333;
}

.shoppingCart .noCart {
  background-color: #f5f5f5;
  padding-top: 0.1rpx;
}

.shoppingCart .noCart .pictrue {
  width: 414rpx;
  height: 336rpx;
  margin: 30rpx auto 90rpx auto;
}

.shoppingCart .noCart .pictrue image {
  width: 100%;
  height: 100%;
}

.shoppingCart .list {
  width: 100%;
  overflow: hidden;
  border-bottom-left-radius: 14rpx;
  border-bottom-right-radius: 14rpx;
}

.shoppingCart .list .item {
  padding: 20rpx;
  background-color: #fff;
}

.shoppingCart .list .item .picTxt {
  width: 610rpx;
  position: relative;
}

.shoppingCart .list .item .picTxt .pictrue {
  width: 160rpx;
  height: 160rpx;
}

.shoppingCart .list .item .picTxt .pictrue image {
  width: 100%;
  height: 100%;
  border-radius: 6rpx;
}

.shoppingCart .list .item .picTxt .text {
  width: 432rpx;
  font-size: 28rpx;
  color: #282828;
}

.shoppingCart .list .item .picTxt .text .reColor {
  color: #999;
}

.shoppingCart .list .item .picTxt .text .reElection {
  margin-top: 20rpx;
}

.shoppingCart .list .item .picTxt .text .reElection .title {
  font-size: 24rpx;
  color: #666;
}

.shoppingCart .list .item .picTxt .text .reElection .reBnt {
  width: 120rpx;
  height: 46rpx;
  border-radius: 23rpx;
  font-size: 26rpx;
  @include coupons_border_color(theme);
  @include main_color(theme);
}

.shoppingCart .list .item .picTxt .text .infor {
  font-size: 24rpx;
  color: #999999;
  margin-top: 20rpx;
}

.money {
  font-size: 32rpx;
  font-weight: 600;
  @include price_color(theme);

  .price-color {
    @include price_color(theme);
  }
}

.mt-28 {
  margin-top: 28rpx;
}

.bg_color {
  @include main_bg_color(theme);
}

.icon-xuanzhong11,
.icon-weixuan {
  font-size: 36rpx;
}

.shoppingCart .list .item .picTxt .carnum {
  height: 47rpx;
  position: absolute;
  bottom: 7rpx;
  right: 0;
}

.shoppingCart .list .item .picTxt .carnum view {
  text-align: center;
  height: 100%;
  line-height: 44rpx;
  font-size: 28rpx;
  color: #333;
}

.shoppingCart .list .item .picTxt .carnum .reduce {
  border-right: 0;
  border-radius: 3rpx 0 0 3rpx;
  border-radius: 22rpx 0rpx 0rpx 22rpx;
  font-size: 34rpx;
  line-height: 46rpx;
}

.shoppingCart .list .item .picTxt .carnum .on {
  color: #cccccc;
}

.shoppingCart .list .item .picTxt .carnum .plus {
  border-left: 0;
  // border-radius: 0 3rpx 3rpx 0;
  border-radius: 0rpx 22rpx 22rpx 0rpx;
  font-size: 34rpx;
  line-height: 46rpx;
}
.shoppingCart .list .item .picTxt .carnum .num {
  color: #282828;
  width: 72rpx;
  height: 36rpx;
  line-height: 36rpx;
  background-color: #f5f5f5;
  border-radius: 4rpx;
  font-size: 24rpx;
}

.shoppingCart .invalidGoods {
  background-color: #fff;
  // margin-top: 30rpx;
  /* #ifdef MP */
  // margin-top: 140rpx;
  /* #endif */
}

.shoppingCart .invalidGoods .goodsNav {
  width: 100%;
  height: 90rpx;
  padding: 0 24rpx;
  box-sizing: border-box;
  font-size: 28rpx;
  color: #333333;
}

.shoppingCart .invalidGoods .goodsNav .iconfont {
  color: #424242;
  font-size: 28rpx;
  margin-right: 17rpx;
}

.shoppingCart .invalidGoods .goodsNav .del {
  font-size: 26rpx;
  color: #333;
}

.shoppingCart .invalidGoods .goodsNav .del .icon-shanchu1 {
  color: #333;
  font-size: 33rpx;
  vertical-align: -2rpx;
  margin-right: 8rpx;
}

.shoppingCart .invalidGoods .goodsList .item {
  padding: 24rpx;
}

.shoppingCart .invalidGoods .goodsList .picTxt {
  width: 592rpx;
}

.shoppingCart .invalidGoods .goodsList .item .invalid {
  font-size: 22rpx;
  color: #cccccc;
  height: 36rpx;
  border-radius: 3rpx;
  text-align: center;
  line-height: 36rpx;
}

.shoppingCart .invalidGoods .goodsList .item .pictrue {
  width: 160rpx;
  height: 160rpx;
}

.shoppingCart .invalidGoods .goodsList .item .pictrue image {
  width: 100%;
  height: 100%;
  border-radius: 6rpx;
}

.shoppingCart .invalidGoods .goodsList .item .text {
  width: 414rpx;
  font-size: 28rpx;
  color: #999;
  height: 140rpx;
}

.shoppingCart .invalidGoods .goodsList .item .text .name {
  width: 100%;
}

.shoppingCart .invalidGoods .goodsList .item .text .infor {
  font-size: 24rpx;
}

.shoppingCart .invalidGoods .goodsList .item .text .end {
  font-size: 26rpx;
  color: #bbb;
}

.footer {
  z-index: 999;
  width: 100%;
  height: 100rpx;
  background-color: #fff;
  position: fixed;
  padding: 0 24rpx;
  box-sizing: border-box;
  border-top: 1rpx solid #eee;
  bottom: var(--window-bottom);
}

.footer .checkAll {
  font-size: 28rpx;
  color: #282828;
  margin-left: 14rpx;
}

.footer .money {
  .font-color {
    font-weight: 600;
  }

  .all_text {
    font-size: 24rpx;
    color: #333;
    font-weight: 400;
  }

  .symbol {
    font-size: 26rpx;
  }

  .all_money {
    font-size: 38rpx;
  }

  .youhui {
    font-size: 20rpx;
    color: #999;
    font-weight: 400;
  }

  .mingxi {
    font-size: 22rpx;
    color: #999;
    font-weight: 400;
    padding-left: 14rpx;
  }
}

.footer .placeOrder {
  color: #fff;
  font-size: 30rpx;
  padding: 0 20rpx;
  height: 70rpx;
  border-radius: 50rpx;
  text-align: center;
  line-height: 70rpx;
  margin-left: 22rpx;
}

.footer .button .bnt {
  font-size: 28rpx;
  color: #999;
  border-radius: 50rpx;
  border: 1px solid #999;
  width: 160rpx;
  height: 60rpx;
  text-align: center;
  line-height: 60rpx;
}

.btn_cart_color {
  font-size: 14px;
  border-radius: 25px;
  width: 80px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  @include coupons_border_color(theme);
  @include main_color(theme);
}

.footer .button form ~ form {
  margin-left: 17rpx;
}

.uni-p-b-96 {
  height: 96rpx;
}

/deep/ checkbox .uni-checkbox-input.uni-checkbox-input-checked {
  @include main_bg_color(theme);
  border: none !important;
  color: #fff !important;
}

/deep/ checkbox .wx-checkbox-input.wx-checkbox-input-checked {
  @include main_bg_color(theme);
  border: none !important;
  color: #fff !important;
  margin-right: 0 !important;
}

.allcheckbox .iconfont {
  margin-right: 16rpx;
}

.window {
  position: fixed;
  bottom: calc(var(--window-bottom) + 100rpx);
  width: 100%;
  left: 0;
  background-color: #fff;
  z-index: 77;
  border-radius: 20rpx 20rpx 0 0;
  padding-bottom: 0;
  transform: translate3d(0, 100%, 0);
  transition: all 0.2s cubic-bezier(0, 0, 0.25, 1);
}

.window.on {
  transform: translate3d(0, 0, 0);
}
.header {
  line-height: 240rpx;
  position: fixed;
  top: 0rpx;
  left: 0rpx;
  z-index: 100;
}
.window .icon-guanbi5 {
  position: absolute;
  font-size: 28rpx;
  color: #aaa;
  top: 30rpx;
  right: 30rpx;
  z-index: 1;
}
</style>
